<template>
  <div class="container">
    <div class="header">
      <div class="header-left-item">
        <div><img id="user-avatar-img" :src="circleUrl" alt="" /></div>
        <div>
          <h2>{{ userInfo.universityName }}-学生档案录入</h2>
        </div>
      </div>
      <div class="header-right-item">
        <el-button type="primary" round @click="addFile">录入档案</el-button>
      </div>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form
          label-position="right"
          label-width="120px"
          :model="studentInfo"
        >
          <div id="buju-content1">
            <el-form-item label="学院：">
              <el-select
                v-model="studentInfo.collegeId"
                filterable
                placeholder="请选择"
                @change="collegeChange"
              >
                <el-option
                  v-for="item in collegeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业：">
              <el-select
                v-model="studentInfo.majorId"
                filterable
                placeholder="请选择"
                @change="majorChange"
              >
                <el-option
                  v-for="item in majorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级：">
              <el-select
                v-model="studentInfo.classId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="姓名：">
            <el-input v-model="studentInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="studentInfo.gender">
              <el-radio label="1">
                <li class="el-icon-male"></li>
                男
              </el-radio>
              <el-radio label="0"
                ><li class="el-icon-female"></li>
                女
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期：">
            <el-date-picker
              v-model="studentInfo.birthday"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="身份证：">
            <el-input v-model="studentInfo.idCard"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址：">
            <el-input v-model="studentInfo.address"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  downloadAvatar,
  getUserDetails,
  getCollegeListByUniversityId,
  getMajorListByCollegeId,
  getClassListByMajorId,
  addStudent,
} from "@/api";
import { validIdCard } from "@/utils/validate";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //默认头像
      userInfo: {}, //管理员基本信息
      collegeList: {}, //学院信息
      majorList: {}, //学院信息
      classList: {}, //班级信息
      studentInfo: {
        collegeId: "",
        majorId: "",
        classId: "", //班级id
        universityId: "",
        username: "",
        gender: "1",
        birthday: "",
        idCard: "",
        address: "",
        type: "0",
      },
    };
  },
  created() {
    this.downloadManagerAvatar();
    this.initUserInfo();
    this.initCollegeList();
  },
  methods: {
    //下载用户头像
    async downloadManagerAvatar() {
      let params = {
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
      };
      let res = await downloadAvatar(params);
      let avatar_img = document.querySelector("#user-avatar-img");
      let imageType = res.type; //获取图片类型
      const blob = new Blob([res], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      avatar_img.src = imageUrl;
      avatar_img.onload = function (e) {
        window.URL.revokeObjectURL(avatar_img.src); //释放URL.createObjectURL()创建的对象
      };
    },
    async initUserInfo() {
      let res = await getUserDetails();
      if (res.code !== 0) {
        this.$message.error("获取用户基本信息失败");
        return;
      }
      this.userInfo = res.data;
    },
    async initCollegeList() {
      let res = await getCollegeListByUniversityId(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.collegeList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    //选择学院
    async collegeChange(collegeId) {
      let res = await getMajorListByCollegeId(collegeId);
      if (res.code == 0) {
        this.majorList = res.data;
      } else {
        this.majorList = [];
        this.$message.error(res.msg);
      }
    },
    //选择专业
    async majorChange(majorId) {
      let res = await getClassListByMajorId(majorId);
      if (res.code == 0) {
        this.classList = res.data;
      } else {
        this.classList = [];
        this.$message.error(res.msg);
      }
    },
    //录入学院档案
    async addFile() {
      let classId = this.studentInfo.classId;
      let username = this.studentInfo.username;
      let birthday = this.studentInfo.birthday;
      let address = this.studentInfo.address;
      if (
        classId.trim() == "" ||
        username.trim() == "" ||
        birthday.trim() == "" ||
        address.trim() == ""
      ) {
        this.$message.warning("用户信息不能有空项");
        return;
      }
      if (!validIdCard(this.studentInfo.idCard)) {
        this.$message.warning("身份证格式错误");
        return;
      }
      //发送录入档案请求
      this.studentInfo.universityId = this.userInfo.universityId;
      let res = await addStudent(this.studentInfo);
      if (res.code == 0) {
        this.$message.success("录入档案成功");
        // this.clearStudnetInfo();
      } else {
        this.$message.error(res.msg);
      }
    },
    clearStudnetInfo() {
      this.studentInfo.classId = "";
      this.studentInfo.universityId = "";
      this.studentInfo.username = "";
      this.studentInfo.gender = "";
      this.studentInfo.username = "";
      this.studentInfo.birthday = "";
      this.studentInfo.idCard = "";
      this.studentInfo.address = "";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.header {
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(217, 212, 212);
  .header-left-item {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      margin: 5px;
    }
  }
  .header-right-item {
    padding-right: 70px;
  }
}
.my-content {
  padding-bottom: 30px;
  border-radius: 0px 0px 10px 10px;
  background: rgb(255, 255, 255);
  width: 70%;
  .my-content-item {
    padding-right: 30px;
    padding-top: 20px;
    #buju-content1 {
      display: flex;
      align-items: center;
    }
  }
}

#user-avatar-img {
  height: 90px;
  width: 90px;
  border-radius: 50px;
}
</style>